<template>
  <el-checkbox-group
    v-model="checkList"
    :disabled="disabled"
    @change="change"
    class="checkbox"
  >
    <el-checkbox
      v-for="item in options"
      :key="item.value"
      :label="item.value"
      :disabled="item.disabled"
    >
      {{ item.label }}
    </el-checkbox>
  </el-checkbox-group>
</template>
<script>
export default {
  name: 'Checkbox',
  props: {
    value: {
      default: () => [],
    },
    options: {
      type: Array,
      default: () => [],
    },
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      checkList: [],
    };
  },
  watch: {
    value: {
      handler(val) {
        this.checkList = val;
      },
      immediate: true,
      deep: true
    },
  },
  methods: {
    change(val) {
      this.$emit('input', val);
    },
  },
};
</script>
<style lang="scss" scoped>
.el-checkbox {
  margin-right: 14px !important;
}
</style>
